<template>
    <el-table border style="width: 100%;" :data="data" :loading="loading">
        <el-table-column align="center" prop="period" :label="$i18n.t('PERIOD_NUM')" :min-width="150" fixed="left"></el-table-column>
        <el-table-column align="center" prop="due_time" :label="$i18n.t('DUE_TIME')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="repayment_time" :label="$i18n.t('REPAYMENT_SUCCESS_TIME')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="interest_amount" :label="$i18n.t('INTEREST_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="service_amount" :label="$i18n.t('SERVICE_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="renewal_amount" :label="$i18n.t('RENEWAL_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="overdue_amount" :label="$i18n.t('OVERDUE_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="paid_amount" :label="$i18n.t('PAID_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="repayment_amount" :label="$i18n.t('MUST_REPAYMENT_AMOUNT')" :min-width="150"></el-table-column>
        <el-table-column align="center" prop="overdue_day" :label="$i18n.t('OVERDUE_DAY')" :min-width="150" fixed="right"></el-table-column>
        <el-table-column align="center" prop="status_text" :label="$i18n.t('REPAYMENT_STATUS')" :min-width="150" fixed="right">
            <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.status === 1" type="" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 2" type="warning" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 3" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
                <el-tag size="mini" v-if="scope.row.status === 4" type="success" effect="dark">{{ scope.row.status_text }}</el-tag>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'RepaymentPlanTable',
        props: ['loading', 'data']
    }
</script>

<style scoped>

</style>
